<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div {
				position: absolute;
				border-radius: 50%;
			}
			body{
				background: black;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
	</body>
	<script>
		//使用构造函数
		function Person(left, top, width, color) {
			this.left = left;
			this.top = top;
			this.width = width;
			this.color = color;
		}
		//在原型中添加方法
		Person.prototype.show = function() {
				//创建div1
				this.div1 = document.createElement("div");
				var body = document.getElementsByTagName("body")[0];
				//圆的属性
				this.div1.style.left = this.left + "px";
				this.div1.style.top = this.top + "px";
				this.div1.style.width = this.width + "px";
				this.div1.style.height = this.width + "px";
				this.div1.style.backgroundColor = this.color;
				//追加
				document.body.appendChild(this.div1);
			}
			//滚动方法
		Person.prototype.move = function() {
				//找到圆的属性
				var left = this.left;
				var top = this.top;
				var width = this.width;
				var height = this.width;

				//水平与垂直的速度
				var shui = Random(10, 30);
				var chui = Random(30, 10);
				//把this存储一下
				var that = this;
				//定时器
				var timer = window.setInterval(function() {
					//把水平的值给left
					//把垂直的值给top
					left = left + shui;
					top = top + chui;
					//屏幕的边界
					if(left > (document.documentElement.clientWidth - width) || left < 0) {
						shui = -shui;
					}
					if(top > (document.documentElement.clientHeight - width) || top < 0) {
						chui = -chui;
					}

					that.div1.style.left = left + "px";
					that.div1.style.top = top + "px";
				}, 50)
			}
			//球的随机数
		for(var i = 0; i <=99; i++) {
			var x = Random(1, 900);
			var y = Random(1, 500);
			var w = Random(10, 50);
			var c = randomColor();
			var p1 = new Person(x, y, w, c);
			p1.show();
			p1.move();
		}
		//封装随机函数
		function Random(min, max) {
			var s = parseInt(Math.random() * (max - min + 1) + min);
			return s;
		}
		//随机颜色
		function randomColor() {
			var r = Math.floor(Math.random() * 256);
			var g = Math.floor(Math.random() * 256);
			var b = Math.floor(Math.random() * 256);
			var c = "rgb(" + r + "," + g + "," + b + ")";
			return c;
		}
	</script>

</html>